<template>
  <div>
      <!-- 搜索栏 -->
      <div class="search">
          <span class="iconfont icon-xiangzuojiantou arrowLeft" @click="back" v-show="!value"></span>
          <span class="iconfont icon-guanbi arrowLeft" @click="empty" v-show="value"></span>
          <div class="input">
            <span class="iconfont icon-sousuo fangdajing"></span>
            <input type="text" placeholder="搜索歌曲、歌手、专辑" @keydown.13="check" v-model="value"/>
          </div>
          <div class="btn">
              <p @click="check">搜索</p>
          </div>
      </div>

      <!-- 热门搜索内容 -->
      <div class="content" v-show="flag">
          <div class="title">
              <p>热门搜索</p>
          </div>
          <div class="lists">
              <div v-for="(item,index) in hotlist" :key="index" @click="acquire">{{item.first}}</div>
          </div>
      </div>
      <!-- 搜索框搜索内容 -->
      <div class="option" v-show="!flag">
          <ul>
              <li v-for="(item,index) in cloudList.slice(0,num)" :key="index"  @click="getID(item.id,item.name)">
                    <span class="one">{{item.name}}</span>&nbsp;<span class="two">{{item.ar[0].name}}</span>
              </li>
          </ul>
      </div>
      <div class="optionHistory" v-show="flag">
          <div class="title">
              <p>搜索历史</p>
          </div>
          <div class="HisContent">
                <ul>
                    <li v-for="(item,index) in text " :key="index">
                        <span>{{item}}</span><span class="iconfont icon-guanbi" @click="del(index)"></span>
                    </li>
                </ul>
          </div>
      </div>
  </div>
</template>

<script>
import {getCloudsearch,getSearchHotDetail} from '../api/search';
export default {
    data(){
        return{
            value:null,
            cloudList:[],
            hotlist:[],
            flag:true,
            num:5,
            text:["南山南","我们的天空"],
        }
    },
    methods:{
        back(){
            this.$router.push("/recommend")
        },
        check(){
            this.num = this.cloudList.lenght;
            this.text.push(this.value)
        },
        // 搜索事件
        getCloudsearchFun(){
            getCloudsearch({keywords:this.value}).then(data=>{
                console.log(data.result.songs)
                this.cloudList = data.result.songs;
            })
        },
        // 热门
        getSearchHotDetailFun(){
            getSearchHotDetail().then(data=>{
                this.hotlist = data.result.hots
            })
        },
        // 点击获取内容
        acquire(e){
            console.log(e);
            this.value = e.target.textContent;
            this.text.push(this.value)
        },
        getID(id,item){
            console.log(id)
            this.text.push(item)
            this.$emit("get-player-id",id)
        },
        empty(){
            this.value = '';
        },
        // 删除
        del(index){
            this.text.splice(index,1)
        }
    },
    watch:{
        value(){
            // console.log("触发enter事件",this.value);
            if(this.value){
                this.flag = false;
                this.num = 5;
                this.getCloudsearchFun();// 搜索事件
            }else{
                this.flag = true
                this.num = 0;
            }
        }
    },
    mounted(){
        this.getSearchHotDetailFun();
    }
    
}
</script>

<style lang="less">
.search{
    display: flex;
    height: 50px;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #ebecec;
    .arrowLeft{
        flex: 1;
        line-height: 19px;
        color: #cdcdce;
    }
    .input{
        flex: 8;
        position: relative;
        input{
            width: 90%;
            height: 30px;
            border-radius: 20px;
            // padding: 5px 10px;
            padding-left: 30px;
            outline-style: none;
            border: none;
            background-color: #ebecec;
            font-size: 14px;
        }
        .fangdajing{
            position: absolute;
            top: 6px;
            bottom: 0px;
            left: 10px;
            font-size: 16px;
            color: #cdcdce;
        }
        input::-webkit-input-placeholder{
            color: #cdcdce;
            font-size: 14px;
        }
    }
    .btn{
        flex:1;
        font-size: 14px;
        p{
            line-height: 19px;
            color: #cdcdce;
        }
    }
}
.content{
    .title {
    height: 30px;
    line-height: 30px;
    text-indent: 5px;
    font-size: 12px;
    color: #999;
    }
  .lists{
      display: flex;
      flex-wrap: wrap;
      div{
        border: 1px solid #dee0e4;
        padding: 8px 14px;
        border-radius: 20px;
        font-size: 14px;
        line-height: 18px;
        margin: 5px;
        margin-left: 10px;
      }
  }
}
.option{
    ul{
        padding: 10px 20px;
        li{
            width: 100%;
            line-height: 30px;
            display: flex;
        span.one{
                font-weight: 700;
                max-width: 180px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
        span.two{
                color: #999;
                font-size: 14px;
            }
        }
    }
}
.optionHistory{
    .title {
    height: 30px;
    line-height: 30px;
    text-indent: 5px;
    font-size: 12px;
    color: #999;
    }
    .HisContent{
        font-size: 14px;
        width: 96%;
        margin: 0px auto;
        ul{
            li{
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 30px;
                span:first-child{
                    width: 300px;
                    overflow: hidden;
                }
            }
        }
    }
}
</style>